<template>
  <div>
    <MyTable :arr="list">
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <!-- 为什么使用作用域插槽？  一次封装  多个使用   提高复用性 -->
      <!-- 用数组当中的对向属性区分 v-if v-else  -->
      <!-- @blur="scope.row.inputVisible=fales" 失去焦点@blur =fales -->
      <template v-slot:body="scope">
        <td>{{ scope.row.id }}</td>
        <td>{{ scope.row.goods_name }}</td>
        <td>{{ scope.row.goods_price }}</td>
        <td>
          <input
            class="tag-input form-control"
            style="width: 100px"
            type="text"
            v-model="scope.row.inputValue"
            v-if="scope.row.inputVisible"
            v-focus
            @blur="scope.row.inputVisible = fales"
            @keydown.enter="addFn(scope.row)"
            @keydown.esc="scope.row.inputValue=''"
          />
          <button
            v-else
            style="display: block"
            class="btn btn-primary btn-sm add-tag"
            @click="scope.row.inputVisible = true"
          >
            +Tag
          </button>
          <span v-for="(item, index) in scope.row.tags" :key="index">
            {{ item }}
          </span>
        </td>
        <td>
          <button class="btn btn-danger btn-sm" @click="spalicfn(scope.row.id)">
            删除
          </button>
        </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from "../components/MyTable.vue";
export default {
  data() {
    return {
      list: [], // 所有数据
    };
  },
  components: {
    MyTable,
  },
  created() {
    this.$axios({
      url: "/api/goods",
    }).then((res) => {
      console.log(res);
      this.list = res.data.data;
    });
  },
  methods: {
    //找索引删除  为什么能通过索引删除
    spalicfn(id) {
      let index = this.list.findIndex((obj) => {
        obj.id === id;
      });
      this.list.splice(index, 1);
    },
    addFn(obj) {
      if (obj.inputValue.trim().length === 0) {
        //在写输入框的时候记得  判断 不能为空
        //如果输入框的输入的为空  或者长度等于0 就return出去
        return alert("亲亲你输入的不能为空格哦");
      }
      obj.tags.push(obj.inputValue);
      obj.inputValue = ""; //输入完 要执行清空 输入框
    },
    
  },
};
</script>

<style>
</style>